<template>
  <view
    class="v-uploader-insert"
    @click="insertImage"
  >
    <view class="content">
      <v-icon
        size="60rpx"
        src="@/static/icons/uploader-insert.svg"
      />
      <view
        v-if="limit"
        class="tip"
      >
        {{ `可上传${props.limit}张` }}
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const insertImage = inject<() => void>('insertImage');

const props = defineProps<{
  limit: number;
}>();
</script>

<style lang="scss" scoped>
.v-uploader-insert {
  height: var(--v-uploader-size);
  width: var(--v-uploader-size);
  padding: 2rpx;
  border-radius: 12rpx;
  border: 1px dashed #cccccc;
  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    width: 100%;
    border-radius: 12rpx;
    background-color: transparent;

    .tip {
      font-size: 26rpx;
      color: #333333;
    }
  }
}
</style>
